<template>
  <div class="app">
    <div>
      <slot>asd</slot>
    </div>
    <div>
      <slot name="header"></slot>
    </div>
    asd
    <button @click="open">{{ title }}点击{{ hello }}</button>
    <van-cell-group>
      <van-cell
        v-model="carmodel"
        title="省/市/区"
        value=""
        @click="show = true"
      ></van-cell>
      <van-popup v-model:show="show" position="bottom">
        <van-picker
          :default-index="2"
          show-toolbar
          :columns="columns"
          @change="onChange"
          @confirm="show = false"
          @cancel="show = false"
        >
          <template v-slot:cancel>
            <div class="icon--button">
              <img src="" alt="暂无" />
            </div>
          </template>
          <template v-slot:title>
            <!-- <p class="title">{{ title }}</p> -->
          </template>
          <template v-slot:confirm>
            <div class="icon--button">
              <img src="" alt="暂无" />
            </div>
          </template>
        </van-picker>
      </van-popup>
    </van-cell-group>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "vue";

export default {
  props: {
    columns: {
      type: Array,
      default: function () {
        return [
          {
            values: ["Monday", "Tuesday", "Wednesday", "Thusday", "Friday"],
            defaultIndex: 2,
          },
          {
            values: ["Morging", "Afternoon", "Evening"],
            defaultIndex: 1,
          },
        ];
      },
    },
    title: {
      type: String,
    },
  },
  setup(props: any, ctx: any) {
    console.log(props);
    let a = ctx.slots.default;
    // let columns = props.columns
    let data = reactive({
      show: false,
      carmodel: "",
      hello: "hello world",
    });
    let onChange = (picker: any, value: any, index: any) => {
      console.log("当前值：" + value + "当前索引：" + index);
      console.log(value);
      let areaName = "";
      for (var i = 0; i < value.length; i++) {
        areaName = areaName + value[i].name + " ";
      }
      data.carmodel = areaName;
    };
    let open = () => {
      data.show = true;
    };
    return {
      ...toRefs(data),
      onChange,
      open,
      a,
      // columns
    };
  },
};
</script>
